<template>
	<view class="content">

		<header class="header-tool">
			<navigator url="amy.html">
				<text class="icon icon-chevron-left"></text>
			</navigator>
			人工传话
		</header>
	
		{{ activeNav }}
		<section class="section">
			<nav class="order-nav">
				<view id="all" class="nav-item" :class="{ active: activeNav === 'all' }" @click="getMyOrderList(0, '')">
					<text>全部</text>
				</view>
				<view class="nav-item" :class="{ active: activeNav === '0' }" @click="getMyOrderList(0, '0')">
					<text>未付款</text>
				</view>
				<view class="nav-item" :class="{ active: activeNav === '1' }" @click="getMyOrderList(1, '1')">
					<text>处理中</text>
				</view>
				<view class="nav-item" :class="{ active: activeNav === '2' }" @click="getMyOrderList(2, '2')">
					<text>处理完成</text>
				</view>
				<!-- <view class="nav-item" :class="{ active: activeNav === '3' }" @click="getMyOrderList(3, '3')">
					<text>处理失败</text>
				</view> -->
			</nav>
			
			<view class="order-content" id="listDiv">
				<view class="order-lists" v-for="(item, index) in orderList" :key="index">
					<view class="order-list-header">
						<view class="order-list-no nowrap">订单号：{{ item.orderID }}</view>
						<view v-if="item.fukuan_status == 0" class="order-list-state state-fail">未付款</view>
						<view v-else-if="item.order_status == 1" class="order-list-state state-await">未处理</view>
						<view v-else-if="item.order_status == 2" class="order-list-state state-success">处理完成</view>
						<!-- <view v-else-if="item.order_status == 3" class="order-list-state state-fail">
							系统驳回
						</view> -->
					</view>

					<view class="order-list-content">
						<text>社交信息：微信-{{ item.channelID }}</text>
						<text>传话内容：{{ item.content }}</text>
						<!-- <text v-if="item.beizhu">传话备注：{{ item.beizhu }}</text> -->
						<text>提交时间：{{ item.createTime }}</text>
						<!-- <text>计划时间：{{ item.chuanhua_time }}</text> -->
						<text><text style="font-weight: bold;">处理时间：{{ item.processTime || '' }}</text></text>
					</view>
					
					<view class="order-list-footer">
						<text style="font-weight: bold;">￥{{ (item.money * 0.01).toFixed(2) }}元</text>
					</view>
				</view>
				
				<view v-if="orderList.length === 0" class="no-data">
					当前暂无人工传话订单数据！
				</view>
			</view>
			
			<view class="PagingList">
				
			</view>
		</section>
	</view>
</template>

<script>
	import { getMyOrderList } from '@/api/index'
	export default {
		data() {
			return {
				title: '人工传话',
				orderList: [],
				activeNav: 'all'
			}
		},
		onShow() {
			this.getMyOrderList('all', 'all')
		},
		onLoad() {
			// this.getSmsList(0, 'all');
			uni.setNavigationBarTitle({
				title: this.title
			});
		},
		methods: {
			getMyOrderList(status, navId) {
				this.activeNav = navId;
				const params = {
					page: 1,
					pageSize: 10,
					type: 3,
					
				}
				console.log(11111, status)
				if (status !== 'all') params['status'] = status
				getMyOrderList(params).then(res => {
					const { code, data } = res;
					console.log(4321232, data)
					if (code === 200) {
						this.orderList = data;
					}
				})
			},
			async getSmsList(status, navId) {
				this.activeNav = navId;
				// 假数据
				this.fetchOrderList(status);
			},
			
			fetchOrderList(status) {
				setTimeout(() => {
					let list = [
						{
							order_id: '20230510001',
							fukuan_status: 1,
							order_status: 1,
							shoujian_num: 'wx123456',
							text_message: '请帮忙联系一下客户，确认订单信息',
							beizhu: '加急处理',
							order_time: '2023-05-10 10:30:00',
							chuanhua_time: '2023-05-12 14:00:00',
							chuli_time: '',
							fukuan_jine: 5000,
							remarks: '信息不完整'
						},
						{
							order_id: '20230510002',
							fukuan_status: 1,
							order_status: 2,
							shoujian_num: 'qq789012',
							text_message: '客户需要修改收货地址',
							beizhu: '',
							order_time: '2023-05-10 11:45:00',
							chuanhua_time: '2023-05-11 16:30:00',
							chuli_time: '2023-05-11 17:15:00',
							fukuan_jine: 3000
						},
						{
							order_id: '20230510003',
							fukuan_status: 1,
							order_status: 3,
							shoujian_num: 'wx987654',
							text_message: '请确认客户是否需要这个服务',
							beizhu: '客户信息不明确',
							order_time: '2023-05-11 09:15:00',
							chuanhua_time: '2023-05-13 10:00:00',
							chuli_time: '',
							fukuan_jine: 2000,
							remarks: '客户联系方式有误'
						}
					];
					
					// 根据状态过滤数据
					if (status !== 0) {
						list = list.filter(item => {
							return item.order_status === status;
						});
					}
					
					this.orderList = list;
				}, 500);
			},
		}
	}
</script>

<style>
	section{
		width: 100%;
	}

   .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	

	.header-tool {
		padding: 0 90rpx;
		background-color: white;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		box-shadow: 0 6rpx 58rpx 0px rgba(189, 191, 191, 0.3);
	}
	
	.header-tool navigator {
		position: absolute;
		left: 0;
		top: 0;
		width: 90rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	

	.order-nav {
		position: fixed;
		background: white;
		height: 100rpx;
		display: flex;
		flex-wrap: wrap;
		left: 0;
		right: 0;
		box-shadow: 0rpx 6rpx 30rpx 0px rgba(189, 191, 191, 0.3);
		z-index: 99;
		top: 90rpx;
		font-size: 14px;
	}
	
	.nav-item {
		line-height: 100rpx;
		width: 20%;
		text-align: center;
		color: #4F4F4F;
	}
	
	.nav-item.active {
		position: relative;
		color: #EC81A7;
		font-weight: bold;
	}
	
	.nav-item.active::after {
		position: absolute;
		bottom: 4rpx;
		left: 50%;
		width: 60rpx;
		height: 3px;
		content: " ";
		background: #EC81A7;
		margin-left: -30rpx;
		border-radius: 2rpx;
	}
	

	.order-content {
		padding-top: 100rpx;
		padding-bottom: 40rpx;
		width: 100%;
	}
	
	.order-lists {
		padding: 0;
		margin: 30rpx;
		background: white;
		width: 90%;
		box-shadow: 0rpx 6rpx 30rpx 0px rgba(189, 191, 191, 0.3);
		border-radius: 20rpx;
	}
	
	.order-list-header {
		border-bottom: solid 1px #F7F7F7;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.order-list-state {
		text-align: center;
		line-height: 48rpx;
		padding: 4rpx 20rpx;
		border-radius: 24rpx;
		font-size: 12px;
	}
	
	.order-list-state.state-await {
		background: rgba(236, 129, 167, .2);
		color: #EC81A7;
	}
	
	.order-list-state.state-success {
		background: rgba(5, 185, 18, .2);
		color: #10AF03;
	}
	
	.order-list-state.state-fail {
		background: rgba(228, 38, 7, .2);
		color: #E00A0A;
	}
	
	.order-list-no {
		position: relative;
		line-height: 88rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
		color: #333;
	}
	
	.order-list-no::before {
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -6rpx;
		content: " ";
		background: #EC81A7;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
	}
	
	.order-list-content {
		padding: 30rpx;
		color: #333;
	}
	
	.order-list-content text {
		display: block;
		margin-bottom: 16rpx;
		line-height: 36rpx;
	}

	.order-list-content text:last-child {
		margin: 0;
	}
	
	.order-list-footer {
		padding: 0 30rpx 30rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	
	.order-list-footer text {
		color: #4286C8;
		font-size: 14px;
	}
	
	.nowrap {
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.PagingList {
		text-align: center;
		padding: 0 30rpx 60rpx 30rpx;
	}
	
	.no-data {
		text-align: center;
		padding: 40rpx;
		color: #999;
	}
</style>